<template>
	<a-trigger
		v-model:popup-visible="visible"
		position="br"
		auto-fit-position
		trigger="click"
		:unmount-on-close="false"
		:popup-translate="[0, 10]"
	>
		<a-button class="moreListTrigger" type="text" @click.stop>
			<template #icon>
				<icon-more />
			</template>
		</a-button>
		<template #content>
			<div class="moreListTriggerContainer" @click="visible = false">
				<slot></slot>
			</div>
		</template>
	</a-trigger>
</template>
<script setup>
import { provide, ref } from 'vue';

const props = defineProps({
	position: {
		type: String,
		default: 'fr',
	},
	popupTranslate: {
		type: Array,
		default() {
			return [0, 10];
		},
	},
});

const visible = ref(false);

const toggleTableHandle = () => {
	visible.value = !visible.value;
};

provide('toggleTableHandle', toggleTableHandle);
</script>
<style lang="less">
// 表格中的操作列表（三个点）
.moreListTrigger {
	width: 24px !important;
	height: 24px !important;
	color: rgb(78, 89, 105) !important;
	&:hover {
		background-color: var(--color-secondary-hover) !important;
	}
	&:active {
		background-color: var(--color-secondary-active) !important;
	}
}
.moreListTriggerContainer {
	box-sizing: border-box;
	width: 128px;
	padding: 4px;
	background-color: #fff;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);

	.arco-btn {
		justify-content: flex-start;
		padding: 0 8px;
	}
}
</style>
